<!-- 危化品车进出记录 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main" style="width: 90vh">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
       <div class="dy-panel-content">
        <contentTitle :title="'节假日车流对比'"></contentTitle>
        <div class="layChart" ref="jjrcldbRef"></div>
      </div>

      <div class="layer-bottom">
        <div class="pd_abItems-contain" style="justify-content: left">
          <div class="pd_abItems-main">
            <div v-for="(item,index) in abItems" :class="{'pd_abItem-item':true,'selected':item.clazz === 'selected'}" @click="abItemsClick(item)">{{item.title}}</div>
          </div>
          <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                         @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
          </div>
          <div class="block_select_contain">
            <el-cascader :options="fristYearOptions" :show-all-levels="false" placeholder="选择年份"
                         @change="fristYearHandleChange"></el-cascader>
          </div>
          <div class="block_select_contain">
            <el-cascader :options="secondYearOptions" :show-all-levels="false" placeholder="对比年份"
                         @change="secondYearChange"></el-cascader>
          </div>
          <div class="pd-abItem-search" style="position: relative">
            <button class="pd-abItem-search-btn" @click="search">查询</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, getCurrentInstance, onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {drawLine} from "../../../util/chartUtil.js";
import {ajaxRequest} from "../../../api/code.js";
import {ElMessage} from "element-plus";
const chart = getCurrentInstance().proxy.$echarts

const emit = defineEmits(['closeChild']);
const closeCurrent = function (){
  emit('closeChild')
}

const curServer = ref(""),curFristYear = ref(""),curSecYear = ref("");

//设置服务区下拉框值
const selectOptions = ref([{
  id: 24193,
  value: '河北高速燕赵驿行集团有限公司',
  label: '河北高速燕赵驿行集团有限公司',
  children: [{
    id: 349,
    value: '滦州服务区',
    label: '滦州服务区'
  }, {
    id: 0,
    value: '山海关服务区',
    label: '山海关服务区'
  }]
}])

const serverHandleChange = (selectItem) => {
  curServer.value = selectItem
}

const fristYearOptions = ref([{value:'2024', label:'2024'},{value:'2025', label:'2025'},{value:'2026', label:'2026'},{value:'2027', label:'2027'},{value:'2028', label:'2028'},{value:'2029', label:'2029'},{value:'2030', label:'2030'},{value:'2031', label:'2031'}])
const secondYearOptions = ref([{value:'2023', label:'2023'},{value:'2024', label:'2024'},{value:'2025', label:'2025'},{value:'2026', label:'2026'},{value:'2027', label:'2027'},{value:'2028', label:'2028'},{value:'2029', label:'2029'},{value:'2030', label:'2030'},{value:'2031', label:'2031'}])

const fristYearHandleChange = function (selectItem){
  curFristYear.value = selectItem
  jjrcldb_legend.value[0] = selectItem[0]

  console.log(selectItem);
}

const secondYearChange = function (selectItem){
  curSecYear.value = selectItem
  jjrcldb_legend.value[1] = selectItem[0]

  console.log(selectItem);
}

const areacode = ref(null)
const abItems = ref([{title:'综合',clazz:'selected'},{title:'东(南)',clazz:''},{title:'西(北)',clazz:''}])
const abItemsClick = function (item){
  abItems.value.forEach((res,i)=>{
    res.clazz = res.title === item.title?'selected':"";
  })
  if(item.title === '综合'){
    areacode.value = null
  }
  else if(item.title === '东(南)'){
    areacode.value = "01"
  }
  else if(item.title === '西(北)'){
    areacode.value = "02"
  }
}

const search = function (){
  console.log(curServer);
  console.log(curFristYear.value);
  console.log(curSecYear.value);
  if(curFristYear.value && curSecYear.value){
    refreshData()
  }
  else{
    ElMessage ({
      type: 'warning',
      message: '选择年份和对比年份不能为空'
    });
  }
}

const currentYear = new Date().getFullYear();
// 计算去年和今年的年份
const lastYear = currentYear - 1;
const thisYear = currentYear;
const jjrcldb_x = ref(['元旦','春节','清明','五一','端午','中秋','国庆'])
const jjrcldb_y_1 = ref([0,0,0,0,0,0,0])
const jjrcldb_y_2 = ref([0,0,0,0,0,0,0])
const jjrcldb_legend= ref([`${thisYear}`,`${lastYear}`]);

const jjrcldbRef = ref();
const jjrcldbOpt = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: jjrcldb_legend.value,
    right: '3%',
    top: '8%',
    textStyle:{
      color: '#FFFFFF'
    },
    color: ['red','yellow'],
    icon:'rect',
    itemWidth: 18,
    itemHeight: 8
  },
  grid: {
    top: '15%',
    left: '8%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisTick:{
      show: false
    },
    axisLabel: {
      interval:0,
      rotate: 0,
      textStyle: {
        color: 'white',
        fontSize: 14
      }
    },
    data: jjrcldb_x.value
  },
  yAxis: {
    type: 'value',
    name: "辆",
    nameTextStyle: {
      color: "#FFF",
      nameLocation: "end",
      padding:[0,0,0,-15]
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(39,163,212,0.52)',
        type: 'dashed',
      }
    },
    axisLabel: {
      interval:0,
      textStyle: {
        color: 'white',
        fontSize: 12
      }
    }
  },
  series: [
    {
      name: jjrcldb_legend.value[0],
      data: jjrcldb_y_1.value,
      type: 'bar',
      barWidth: 10,
      itemStyle: {
        borderRadius: [10, 10, 0, 0], // 这里设置圆角
        color: new chart.graphic.LinearGradient(
            0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
            [
              {offset: 0, color: '#50E4DF'},   // 0% 处的颜色
              {offset: 1, color: 'rgba(136,243,241,0)'}   // 100% 处的颜色
            ]
        )
      }
    },
    {
      name: jjrcldb_legend.value[1],
      data: jjrcldb_y_2.value,
      type: 'bar',
      barWidth: 10,
      itemStyle: {
        borderRadius: [10, 10, 0, 0], // 这里设置圆角
        color: new chart.graphic.LinearGradient(
            0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
            [
              {offset: 0, color: '#F44538'},   // 0% 处的颜色
              {offset: 1, color: 'rgba(136,243,241,0)'}   // 100% 处的颜色
            ]
        )
      }
    }
  ]
});
let jjrcldbChart
onMounted(() => {
  jjrcldbChart = drawLine(jjrcldbRef.value,jjrcldbOpt.value);
  getFwqxx()
  // refreshData()
})

/**
 * 节假日车流分析
 */
 async function refreshData() {
  let year = jjrcldb_legend.value[0]
  if(!year.length){
    year = jjrcldb_legend.value[0].getFullYear()
  }
  //1.查询节假日信息
  const result = await ajaxRequest('post', 'getHolidays', {year:year})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      jjrcldb_x.value[index] = item.express
      //根据节假日查询车流
      getJjrclfx(index,item.holidaytypeid)
    })
  } else {
    ElMessage ({
      type: 'warning',
      message: `节假日信息获取失败，请先维护[`+year+`]年节假日信息`
    });
  }
}

/**
 * 根据节假日查询车流
 */
async function getJjrclfx(index,holidaytypeid) {
  let xznf = jjrcldb_legend.value[0]
  if(!xznf.length){
    xznf = jjrcldb_legend.value[0].getFullYear()
  }
  let dbnf = jjrcldb_legend.value[1]
  if(!dbnf.length){
    dbnf = jjrcldb_legend.value[1].getFullYear()
  }
  const params = {
    xznf : xznf,
    dbnf : dbnf,
    areacode: areacode.value,
    compid: curServer.value[1],
    holidaytypeid : holidaytypeid
  }
  jjrcldb_y_1.value[index]=0
  jjrcldb_y_2.value[index]=0
  const res = await ajaxRequest('post', 'getJjrclfx', params)
  if (res.data) {
    if(res.data.thisyear && res.data.thisyear.length>0){
      let cnt=0
      res.data.thisyear.forEach((item,index)=>{
        cnt+=item.cnt
      })
      if (xznf > dbnf) {
        jjrcldb_y_1.value[index]=cnt
      } else {
        jjrcldb_y_2.value[index]=cnt
      }
    }
    if(res.data.lastyear && res.data.lastyear.length>0){
      let cnt=0
      res.data.lastyear.forEach((item,index)=>{
        cnt+=item.cnt
      })
      if (xznf > dbnf) {
        jjrcldb_y_2.value[index]=cnt
      } else {
        jjrcldb_y_1.value[index]=cnt
      }
    }
  }
  jjrcldbOpt.value.xAxis.data = jjrcldb_x.value
  jjrcldbOpt.value.series[0].data = jjrcldb_y_1.value
  jjrcldbOpt.value.series[1].data = jjrcldb_y_2.value
  jjrcldbChart.setOption(jjrcldbOpt.value)
}

/**
 * 获取服务区档案信息
 */
 async function getFwqxx() {
  selectOptions.value[0].children = []
  const result = await ajaxRequest('post', 'getFwqxx', {})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      selectOptions.value[0].children.push({id:item.id,value:item.id,label:item.compname})
    })
  }
}

</script>

<style scoped>
.dy-panel-main{
  padding:2.5vh;
}

.layer-bottom{
  padding-left: 0;
  padding-top: 2vh;
  padding-bottom: 1vh;
  border-top: 2px solid #1D4F59;
}

:deep(.el-input__wrapper){
  background-color: transparent !important;
  color: #FFFFFF !important;
  height: 3vh;
  flex-grow: 0.5 !important;
  width: 15vh;
  margin-right: 2vh;
}
:deep(.custom-date-picker){
  width: 22vh !important; /* 确保您的样式被应用 */
}
:deep(.el-date-editor .el-range-input){
  color: #FFFFFF !important;
}
:deep(.el-date-editor .el-range-separator){
  color: #FFFFFF !important;
}

</style>
